<template>
  <el-breadcrumb separator="/" class="px-4">
    <el-breadcrumb-item
      v-for="(item, index) in breadcrumbItems"
      :key="index"
      :to="item.to"
    >
      {{ item.label }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { treeToList } from '@wh/utils'
import { menuData } from '@/router/menu'
defineOptions({
  name: 's-breadcrumb',
})

const route = useRoute()

const breadcrumbItems = computed(() => {
  const matched = route.matched
  const list = treeToList(menuData, [])
  const res: { label: string; to: string }[] = []
  matched.forEach((match) => {
    const item = list.find((item) => item.path === match.path)
    if (item) {
      res.push({
        label: item.meta.title,
        to: item.path,
      })
    }
  })
  return res
})
</script>
